import React from 'react';
import { createPortal } from 'react-dom';
import { Button, Slider } from 'antd';

const modalRoot = document.getElementById('dialog-root');

class TimeLinePanel extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      sliderValue: 0,
      playing: false,
      intervalId: -1
    }

    this.el = document.createElement('slider_div');

  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
    const { values } = this.props;
    // fix by chrli 初始显示时间轴最后一个
    const value=values.length-1;
    this.setState({ sliderValue: value });
  }

  componentWillUnmount() {
    const { intervalId } = this.state;
    clearInterval(intervalId);
    modalRoot.removeChild(this.el);
  }

  changeHandler = (value) => {
    const { values, onValueChange } = this.props;
    this.setState({ sliderValue: value });
    if (onValueChange) {
      onValueChange(values[value]);
    }
  }

  playHandler = () => {
    const { values } = this.props;
    const { playing } = this.state;
    this.setState({ playing: !playing });
    if (!playing) {
      let intervalId = setInterval(() => {
        const { sliderValue } = this.state;
        if (sliderValue < values.length) {
          const { onValueChange } = this.props;
          this.setState({ sliderValue: sliderValue + 1 });
          if (onValueChange) {
            onValueChange(values[sliderValue + 1]);
          }
        } else {
          //改循环播放  by chrli
          const { onValueChange } = this.props;
          this.setState({ sliderValue: 0 });
          if (onValueChange) {
            onValueChange(values[0]);
          }
          // const { intervalId } = this.state;
          // clearInterval(intervalId);
          // this.setState({ playing: false });
        }
      }, 1500);
      this.setState({ intervalId });
    } else {
      const { intervalId } = this.state;
      clearInterval(intervalId);
    }
  }

  render() {
    const { sliderValue, playing } = this.state;
    const { style, values, width } = this.props;
    const marks = values.reduce(function (o, val, index) { o[index] = val; return o; }, {});
    const min = 0;
    const max = values.length - 1;
    const winWidth = values.length * 70 + 72;
    const winLeft = (width - winWidth) / 2;
    return (
      createPortal(
        <div style={{ ...style, left:winLeft, width: values.length * 70 + 72, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: 5 }}>
          <div style={{ display: 'flex', flexDirection: 'row' }}>
            <div style={{ display: 'flex', alignItems: 'center', paddingLeft: 5, paddingRight: 5 }}>
              <Button icon={playing ? 'pause' : 'caret-right'} onClick={this.playHandler}></Button>
            </div>
            <div style={{ flex: 1, paddingLeft: 15, paddingRight: 15 }}><Slider value={sliderValue} tipFormatter={null} size='small' marks={marks} min={min} max={max} onChange={this.changeHandler} /></div>
          </div>
        </div>,
        this.el)
    );
  }
}

export default TimeLinePanel;
